<template>
  <div :class="{'item-box': true, [imgList2[item.status]]: true}">
    <b :style="{ backgroundColor: colorList2[item.status] }"></b>
    <div class="text-num">
      <i :class="{'imgBg': true, [imgList[item.status]]: true}"/>
      <!-- color: colorList[item.status] -->
      <p :style="{ display: 'block' }" class="number text-lg font-bold">{{ item.lineCode }}</p>
      <span style="display: block;margin-top: 28px;" class="str text-lg">{{ item.timeStr }}</span>
    </div>
    <itemDialog ref="itemDialogRef"/>
  </div>
</template>

<script setup>
import { defineProps,ref } from 'vue'
import itemDialog from './itemDialog.vue'
//接收组件传值
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => {
      return {
      }
    },
  },
})
const itemDialogRef = ref()
const colorList ={
  '开机':'#0285fe',
  '生产':'#0ac1c6',
  '停机':'#d98600',
  '故障':'#ff2300',
  '运行':'#1feb06',
}
const colorList2 ={
  '开机':'rgba(12,134,250,0.8)',
  '生产':'rgba(22,200,205,0.68)',
  '停机':'rgba(218,138,14,0.8)',
  '故障':'rgba(237,58,29,0.8)',
  '运行':'rgba(51,232,28,0.86)',
}
const imgList ={
  '开机':'imgBg01',
  '生产':'imgBg02',
  '停机':'imgBg03',
  '故障':'imgBg04',
  '运行':'imgBg05',
}
const imgList2 ={
  '开机':'item-box01',
  '生产':'item-box02',
  '停机':'item-box03',
  '故障':'item-box04',
  '运行':'item-box05',
}

const open = (item) => {
  itemDialogRef.value.openAddDialog(item)
}

</script>

<style scoped lang="scss">
.item-box{
  position: relative;
  width: 232px;
  height: 58px;
  font-size: 18px;
  color: #fff;
  opacity: 0.9;
}
.item-box01{
  background: url("@/assets/images/border4.png") no-repeat center;
  background-size: contain; /* 保持图片比例 */
  background-position: center; /* 确保图片居中显示 */
}
.item-box02{
  background: url("@/assets/images/border.png") no-repeat;
  background-size: 100% 100%;
}
.item-box03{
  background: url("@/assets/images/border2.png") no-repeat;
  background-size: 100% 100%;
}
.item-box04{
  background: url("@/assets/images/border5.png") no-repeat;
  background-size: 100% 100%;
}
.item-box05{
  background: url("@/assets/images/border3.png") no-repeat;
  background-size: 100% 100%;
}
.imgBg {
  position: absolute;
  top: 25px;
  left: -13px;
  width: 24px;
  height: 24px;
  animation: rotate 5s infinite linear;
}
.imgBg01 {
  background: url('@/assets/images/blue.png') no-repeat center;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
}
.imgBg02 {
  background: url('@/assets/images/green.png') no-repeat center;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
}
.imgBg03 {
  background: url('@/assets/images/orange.png') no-repeat center;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
}
.imgBg04 {
  background: url('@/assets/images/red.png') no-repeat center;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
}
.imgBg05 {
  background: url('@/assets/images/green2.png') no-repeat center;
  background-size: cover; /* 修改为cover以确保图片适应元素 */
}
.item-box b {
  width: 101px;
  height: 5px;
  //background: #8d9298;
  display: block;
  position: absolute;
  right: 12px;
  top: 56px;
}
.text-num{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 41px;
  width: 100%;
}
.number{
  text-align: center;
  flex: 1;
  margin-left: 22px;
  padding-top: 10px;
}
.str{
  flex: 2;
  text-align: center;
}
@keyframes rotate {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
